<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <hmInput ref='username' v-model="user.username" placeholder='请输入手机号' :reg='/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/' type='text' ></hmInput>
      <hmInput ref='nickname' v-model="user.nickname" placeholder='请输入昵称' :reg='/^.{1,10}$/' type='text' ></hmInput>
      <hmInput ref='password' v-model="user.password" placeholder='请输入密码' :reg="/^.{3,16}$/" type="password" ></hmInput>
    </div>
    <p class="tips">
      有账号？
      <a href="#/login" class="">去登录</a>
    </p>
    <van-button type="primary" block round @click="registerFn" >注册</van-button>
  </div>
</template>

<script>
import hmInput from '@/components/hmInput.vue'
import {register} from '@/apis/user.js'
export default {
      components:{hmInput},
      data(){
          return{
              user:{
                  username:'15875339307',
                  password:'123',
                  nickname:'智'
              }
          }
      },
      methods:{
          registerFn(){
            //   获取isOK用于判定用户输入是否正确
            let {username, password,nickname } = this.$refs
            if(!username.isOK || !password.isOK || !nickname.isOK){
            this.$toast.fail('内容输入不合法')
            return
            }
            register(this.user).then(res=>{
                console.log(41,res);
                if(res.data.message==='注册成功'){
                    this.$router.push({
                        path:'/login'
                    })
                }
                this.$toast({
                    message:res.data.message
                })
            })
        }
      }
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>